<template>
  <div class="menu">
    <div class="slot-items">
      <slot name="default"></slot>
    </div>
    <div class="default-items">
      <div class="icon">
        <IconStar></IconStar>
      </div>
      <div class="icon" @click="setModalVisible(true)">
        <IconMessage></IconMessage>
      </div>
      <div class="avatar" @click="setDrawerVisible(true)">
        <a-avatar>A</a-avatar>
      </div>
    </div>

    <drawer :visible="drawerVisible" :setVisible="setDrawerVisible">
      <div class="profile">
        <div class="profile-header">
          <a-avatar>{{ userInfo?.username?.split?.("")?.[0] }}</a-avatar>
          <div class="profile-header-text">
            <div class="username">
              {{ userInfo?.username ?? "--" }}({{ userInfo?.realname ?? "--" }})
            </div>
            <div class="email">{{ userInfo?.email ?? "--" }}</div>
          </div>
        </div>

        <div class="profile-body">
          <a-button @click="setFrinedModalVisible(true)">好友列表</a-button>
          <a-button @click="logout">注销</a-button>
        </div>
      </div>
    </drawer>

    <modal :visible="frinedModalVisible" :set-visible="setFrinedModalVisible">
      <friendsList></friendsList>
    </modal>

    <modal :visible="modalVisible" :setVisible="setModalVisible">
      <slot name="modal1"></slot>
    </modal>
  </div>
</template>

<script setup lang="ts">
import friendsList from "@/components/oldman/friends-list/index.vue";
import { IconStar, IconMessage } from "@arco-design/web-vue/es/icon";
import drawer from "@/components/common/drawer/index.vue";
import modal from "@/components/common/modal/index.vue";
import { ref } from "vue";
import router from "@/router/route";
import { Message } from "@arco-design/web-vue";
import { onMounted } from "vue";

const drawerVisible = ref(false);
const modalVisible = ref(false);
const userInfo = ref(null);

const logout = () => {
  localStorage.removeItem("jwtToken");
  localStorage.removeItem("userInfo");
  userInfo.value = null;
  router.push("/");
  Message.info("注销成功");
};

const frinedModalVisible = ref(false);

const setFrinedModalVisible = (v: boolean) => {
  frinedModalVisible.value = v;
};
const setDrawerVisible = (v: boolean) => {
  drawerVisible.value = v;
};

const setModalVisible = (v: boolean) => {
  modalVisible.value = v;
};

onMounted(() => {
  const info = localStorage.getItem("userInfo");
  if (info) {
    userInfo.value = JSON.parse(info);
  }
});
</script>

<style scoped>
.menu {
  height: 52px;
  padding: 0 12px;
  gap: 24px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  background-color: var(--color-neutral-2);
}

.default-items {
  display: flex;
  justify-content: space-around;
  gap: 24px;
  align-items: center;
}
.slot-items {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  gap: 12px;
}
.icon {
  text-align: center;
  color: #3337;
  cursor: pointer;
}
.icon * {
  height: 24px;
  width: 24px;
}
.avatar {
  cursor: pointer;
}

.profile-header {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

.username {
  font-weight: 700;
}
.email {
  font-weight: 400;
}

.profile-body {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
}

.friend-list {
  min-height: 300px;
  max-height: 80vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

.friend-item {
  background-color: pink;
}
</style>
